<!--这是查看产品组件-->
<template>
  <div class="app-container">
    <div class="filter-container c-flex-row c-aligni-center c-justify-sb">
      <div>
        <el-button @click="handCopy(copyUrl, $event)">复制链接</el-button>
        <el-button v-if="permission == 3" type="primary" @click="addNews(-1)">添加资讯
        </el-button>
      </div>
      <el-form class="form-container">
        <el-input @keyup.enter.native="handleFilter" v-model="listQuery.newsName" clearable placeholder="资讯名称"
                  style="width: 150px;"></el-input>
        <el-date-picker type="date" :editable="false" format="yyyy-MM-dd" placeholder="发布日期（开始）" v-model="listQuery.publish_time">
        </el-date-picker>
        <el-date-picker type="date" :editable="false" format="yyyy-MM-dd" placeholder="发布日期（结束）" v-model="listQuery.end_time">
        </el-date-picker>
        <el-select clearable style="width: 120px;" v-model="listQuery.selectSort" placeholder="分类">
          <el-option
            v-for="item in category"
            :key="item.ncId"
            :label="item.name"
            :value="item.ncId">
          </el-option>
        </el-select>
        <el-button class="search" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" row-key="id" v-loading="listLoading" element-loading-text="加载中..." fit
                highlight-current-row :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" class="c-width100 color-222 family-PingFangSC-Regular font-s12">
        <el-table-column align="left" label="名称">
          <template slot-scope="scope">
            <img v-if="scope.row.avatar" :title="scope.row.name" :src="scope.row.avatar" width="80" height="80" class="fl margin-r c-verticalAlign-m">
            <div class="fl">
              <div :title="scope.row.name" class="color-222 line-limit-length-240 fl">
                {{scope.row.name}}
              </div>
              <el-popover class="fl font-s12" style="font-size: 12px" v-if="scope.row.name && scope.row.name.length>20"
                placement="left"
                width="400"
                trigger="hover">
                <div>{{scope.row.name}}</div>
                <i slot="reference" class="el-icon-view c-fc-deepskyblue margin-l10"></i>
              </el-popover>
              <div>{{scope.row.createdAt}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="200" align="center" label="浏览量">
          <template slot-scope="scope">
            <span>{{scope.row.browse}}</span>
          </template>
        </el-table-column>
        <el-table-column width="200" align="center" label="状态">
          <template slot-scope="scope">
            <el-switch :active-value=1 :inactive-value=0 @change="changeData(scope.row.newsId,scope.row.status,'status')" v-model="scope.row.status" active-text="显示" inactive-text="隐藏"></el-switch>
          </template>
        </el-table-column>
        <el-table-column width="200" align="center" label="排序">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" type="number" @blur="changeData(scope.row.newsId,scope.row.sort,'sort')" :min=0 :max=100 :maxlength=3 placeholder="排序"></el-input>
          </template>
        </el-table-column>
        <el-table-column width="200" align="center" label="操作">
          <template slot-scope="scope">
              <b v-if="permission == 3" @click="addNews(scope.row.newsId)" >编辑</b>
              <span class="color-409" v-if="permission == 3">|</span>
              <b v-if="permission == 3" @click="deleteNews(scope.row.newsId)">删除</b>
          </template>
        </el-table-column>
      </el-table>
      <div class="block text-c">
        <!--分页组件 current-page:当前页   -->
        <!--   page-sizes:每页几条数据（选项）   -->
        <!--   page-size:每页几条数据   -->
        <!--   total:总条数   -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total">
        </el-pagination>
      </div>
    </div>
    <addNews v-if="isShowAdd" :newsId="newsId" @hideAdd="hideAdd" @saveNews="saveNews"></addNews>
  </div>
</template>
<script>
  import { getNewsList, delNews } from '@/api/news'
  import clip from '@/utils/clipboard'
  import { mall_productList } from '@/utils/permission'
  import { changeTableValue } from "@/api/common"
  import addNews from './components/addNews.vue'
  // import {  getTimeString, formatNumber } from '@/utils/index'
  export default {
    components: {
      addNews,
    },
    data() {
      return {
        permission: 3,
        listQuery: {
          currentPage: 1, // 当前页
          total: null, // 数据总条数
          publish_time: null, // 搜索的发布时间（开始）
          end_time: null, // 搜索的发布时间（结束）
          newsName: null, // 搜索的产品名称
          selectSort: null, // 选择的产品分类
          page: 1
        },
        isShowAdd: false,
        newsId: 0,
        category: [],
        tableData: [],
        listLoading: false,
        copyUrl: null
      }
    },
    watch: {
      '$route': function() {
        this.listQuery.selectSort = null
        this.getList()
      }
    },
    created() {
      this.getModelPermission()
      this.getList()
    },
    methods: {
      flushCom: function() {
        this.$router.go(0)
      },
      getModelPermission() {
        this.permission = mall_productList()
      },
      getList() {
        this.listLoading = true
        getNewsList(this.listQuery).then(res => {
          this.tableData = res.data.data.list.data
          this.listQuery.total = res.data.data.list.total
          this.category = res.data.data.category
          this.copyUrl = res.data.data.copyUrl
          this.listLoading = false
        }).catch(err => {
          console.log(err)
        })
      },
      //更改列表数据
      changeData(ids,val,name){
        let data = {};
        data.table='news';
        data.idName='newsId';
        data.idValue=ids;
        data.name= name;
        data.value=val;
        changeTableValue(data)
          .then(res => {
            
          })
          .catch(err => {
            console.log(err);
          });
      },
      deleteNews(newsId) { // 删除商品
        this.$confirm('此操作将永久删除该资讯, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var data = { newsId: newsId }
          delNews(data).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          }).catch(err => {
            console.log(err)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
   
      addNews(newsId) {
        if (newsId == -1) {
          this.newsId = 0;
        } else {
          this.newsId = newsId;
        }
        this.isShowAdd = true
      },
      hideAdd(msg) {
        this.isShowAdd = msg
      },
      saveNews() {
        this.getList()
      },

      handleSizeChange(val) { // 切换每页几条数据方法
        // console.log(`每页 ${val} 条`)
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) { // 切换当前页
        // console.log(`当前页: ${val}`)
        this.listQuery.page = val
        this.getList()
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handCopy(url, event) {
        clip(url, event)
      }
    }
  }
</script>

<style scoped>
  b {
    padding: 0;

  }
  .original{
    text-decoration: line-through;
    margin-right: 10px;
  }
</style>
